import React from "react";
import {Dropdown, Badge, Avatar} from 'antd';
import Menu from "antd/es/menu";
import {UserOutlined, PoweroffOutlined, SettingOutlined} from '@ant-design/icons';
import '../../css/pointer.css'
import getCookie from "../utils/getCookie";
import axsio from 'axios'
import history from "../utils/history";

function handleOut(){
    let strCookie=getCookie();
    strCookie = strCookie.substr(0,strCookie.indexOf("="));
    axsio.get("http://localhost:8090/api/rest/consumer/out/"+strCookie).then(function (response) {
        if(response.data.status===200){
            history.back();
        }
    })
}

const menu = (
    <Menu>
        <Menu.Item>
            <a target="_parent" href="http://www.alipay.com/">
                <UserOutlined/> 个人中心
            </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_parent" rel="noopener noreferrer" href="http://www.taobao.com/">
                <SettingOutlined/>  设置
            </a>
        </Menu.Item>
        <Menu.Item>
            <a target="_parent" rel="noopener noreferrer" onClick={handleOut}>
                <PoweroffOutlined/>  退出
            </a>
        </Menu.Item>
    </Menu>
);
export default class MyHeadShot extends React.Component{
    constructor(props) {
        super(props);
    }



    render() {
        return (
        <span className="avatar-item" className="pointer">
            <Dropdown overlay={menu} placement="bottomCenter" arrow trigger={['click']}>
                <Badge count={this.props.HeadBadge}>
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                </Badge>
            </Dropdown>
        </span>
        )
    }
}